<template>
  <div>
    <div class="plane">
      <div class="plane-title flex-space-between-item">
        <div class="flex-start-item">
          <p class="title" style="margin-right: 10px">今日数据</p>
          <p>{{ date }}</p>
        </div>
        <p class="link" @click="menuItem[1].handleClick()">详细数据></p>
      </div>
      <div class="inner-container flex-space-between-item">
        <div class="inner-plane">
          <p class="plane-title">营业额</p>
          <p class="plane-value">￥{{ todayData.turnover }}</p>
        </div>
        <div class="inner-plane">
          <p class="plane-title">有效订单</p>
          <p class="plane-value">{{ todayData.validOrderCount }}</p>
        </div>
        <div class="inner-plane">
          <p class="plane-title">订单完成率</p>
          <p class="plane-value">{{ (todayData.orderCompletionRate * 100).toFixed(2) }}%</p>
        </div>
        <div class="inner-plane">
          <p class="plane-title">平均客单价</p>
          <p class="plane-value">￥{{ todayData.unitPrice.toFixed(2) }}</p>
        </div>
        <div class="inner-plane" style="margin-right: 0">
          <p class="plane-title">新增用户</p>
          <p class="plane-value">{{ todayData.newUsers }}</p>
        </div>
      </div>
    </div>

    <div class="flex-space-between-item">
      <div class="plane" style="flex-grow: 1; margin-right: 20px">
        <div class="plane-title flex-space-between-item">
          <div class="flex-start-item">
            <p class="title" style="margin-right: 10px">菜品总览</p>
          </div>
          <p class="link" @click="menuItem[2].handleClick()">菜品管理></p>
        </div>
        <div class="inner-container flex-space-between-item">
          <div class="inner-plane flex-space-between-item" style="flex-grow: 2; margin-right: 10px">
            <p class="plane-title">已启售</p>
            <p class="plane-value">{{ dishesData.sold }}</p>
          </div>
          <div class="inner-plane flex-space-between-item" style="flex-grow: 2; margin-right: 10px">
            <p class="plane-title">已停售</p>
            <p class="plane-value">{{ dishesData.discontinued }}</p>
          </div>
          <div
            class="inner-plane flex-space-between-item"
            style="flex-grow: 1; margin-right: 0; height: 72px"
          >
            <p class="plane-title">新增菜品</p>
          </div>
        </div>
      </div>
      <div class="plane" style="flex-grow: 1">
        <div class="plane-title flex-space-between-item">
          <div class="flex-start-item">
            <p class="title" style="margin-right: 10px">员工总览</p>
          </div>
          <p class="link" @click="menuItem[4].handleClick()">员工数据></p>
        </div>
        <div class="inner-container flex-space-between-item">
          <div class="inner-plane flex-space-between-item" style="flex-grow: 2; margin-right: 10px">
            <p class="plane-title">总员工</p>
            <p class="plane-value">2</p>
          </div>
          <div class="inner-plane flex-space-between-item" style="flex-grow: 2; margin-right: 10px">
            <p class="plane-title">已打卡</p>
            <p class="plane-value">2</p>
          </div>
          <div
            class="inner-plane flex-space-between-item"
            style="flex-grow: 1; margin-right: 0; height: 72px"
          >
            <p class="plane-title">新增员工</p>
          </div>
        </div>
      </div>
    </div>

    <div class="plane">
      <div class="plane-title flex-space-between-item">
        <div class="flex-start-item">
          <p class="title" style="margin-right: 10px">订单管理</p>
        </div>
        <p class="link" @click="menuItem[3].handleClick()">订单明细></p>
      </div>
      <div class="inner-container flex-space-between-item">
        <div class="inner-plane flex-space-between-item">
          <p class="plane-title">待接单</p>
          <p class="plane-value">{{ orderData.waitingOrders }}</p>
        </div>
        <div class="inner-plane flex-space-between-item">
          <p class="plane-title">已完成</p>
          <p class="plane-value">{{ orderData.completedOrders }}</p>
        </div>
        <div class="inner-plane flex-space-between-item">
          <p class="plane-title">已取消</p>
          <p class="plane-value">{{ orderData.cancelledOrders }}</p>
        </div>
        <div class="inner-plane flex-space-between-item" style="margin-right: 0">
          <p class="plane-title">全部订单</p>
          <p class="plane-value">{{ orderData.allOrders }}</p>
        </div>
      </div>
    </div>
    <div class="plane">
      <div class="plane-title">
        <p class="title" style="margin-bottom: 10px">订单信息</p>
        <el-table :data="orderTableData" style="width: 100%">
          <el-table-column prop="id" label="订单号" width="150" />
          <el-table-column prop="name" label="订单菜品" width="200" />
          <el-table-column prop="time" label="预计完成时间" width="200" />
          <el-table-column prop="price" label="实收金额" width="150" />
          <el-table-column prop="tips" label="备注" width="180" />
          <el-table-column prop="operation" label="" width="100">
            <template #default="scope">
              <el-button size="small" @click="takeDetail(scope.$index)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, inject } from 'vue'
import dayjs from 'dayjs'

// current date
let date = ref()
onMounted(() => {
  date.value = dayjs().format('YYYY-MM-DD')
})
// initial value
const headers = new Headers({
  application: 'json',
  Authorization: sessionStorage.getItem('token')!,
  token: sessionStorage.getItem('token')!
})
fetch('/api/admin/workspace/businessData', {
  method: 'GET',
  headers: headers
})
  .then((res) => res.json())
  .then((data) => {
    if (data.code === 1) {
      Object.assign(todayData, data.data)
    }
  })
fetch('/api/admin/workspace/overviewDishes', {
  headers: headers
})
  .then((res) => res.json())
  .then((data) => {
    if (data.code === 1) {
      Object.assign(dishesData, data.data)
    }
  })
fetch('/api/admin/workspace/overviewOrders', {
  headers: headers
})
  .then((res) => res.json())
  .then((data) => {
    if (data.code === 1) {
      Object.assign(orderData, data.data)
    }
  })
fetch('/api/admin/order/conditionSearch?page=1&pageSize=10', {
  headers: headers
})
  .then((res) => res.json())
  .then((data) => {
    if (data.code === 1) {
      data.data.records.forEach((item) => {
        orderTableData.push({
          id: item.id,
          name: item.orderDishes,
          time: item.orderTime,
          price: item.amount,
          tips: item.orderDetailList
        })
      })
    }
  })

// today data
let todayData = reactive({
  newUsers: 0,
  orderCompletionRate: 0,
  turnover: 0,
  unitPrice: 0,
  validOrderCount: 0
})
let dishesData = reactive({
  discontinued: 0,
  sold: 0
})
let orderData = reactive({
  allOrders: 0,
  cancelledOrders: 0,
  completedOrders: 0,
  deliveredOrders: 0,
  waitingOrders: 0
})

// orderTable
const orderTableData = reactive([])
function takeDetail(index: number) {
  console.log(index)
}

// inject menu
import { type MenuItemInstance } from 'element-plus/lib'
const menuItem = inject<Array<MenuItemInstance>>('menuItem')!
</script>

<style scoped>
@import '@/assets/common.css';

.link {
  color: gray;
  transition: 0.3s;
}

.link:hover {
  cursor: pointer;
  color: rgba(128, 128, 128, 0.545);
}

.inner-plane {
  background-color: #ecf5ff;
  flex-grow: 1;
  margin-right: 20px;
  padding: 20px;
  border-radius: 10px;
}

.plane-title {
  font-size: 12px;
}

.plane-value {
  font-size: 20px;
  font-weight: bold;
}

.inner-container {
  margin-top: 10px;
}
</style>
